<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/stylus.css" />
    <link rel="stylesheet" href="./css/h5style.css" />
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="./js/bootstrap.bundle.js"></script>
    <title>Document</title>
  </head>
  <body>
    <!-- 导航条 -->
    <header class="header_pc"><img class="header_img" src="./img/Group 2.png" alt="" /></header>

    <!-- 功能区 ==电脑 -->
    <main id="pc">
      <div class="row">
        <!-- 菜单 -->
        <div class="col-md-12 main_top">
          <div>
            <img src="./img/侧边伸缩_1.png" alt="" />
            <img src="./img/Menu.png" alt="" />
          </div>
          <div>#FFFFFF</div>
          <div class="main_top_btn">Buy now</div>
        </div>
        <!-- 左边区域 -->
        <div class="col-md-6">
          <div style="width: 100%;margin-left: -7%;">
            <ul class="ul_txImg">
              <li>
                <div class="tx_img">1</div>
              </li>
              <li>
                <div class="tx_img">2</div>
              </li>
              <li>
                <div class="tx_img">3</div>
              </li>
              <li>
                <div class="tx_img">4</div>
              </li>
              <li>
                <div class="tx_img">5</div>
              </li>
            </ul>
          </div>
          <div class="main_left_cen">
            <div class="left_top">Heads</div>
            <div class="left_centent">
              <div class="left_centent_box">z</div>
              <div class="left_centent_box">z</div>
              <div class="left_centent_box">z</div>
            </div>
            <div class="left_centent">
              <div class="left_centent_box">z</div>
              <div class="left_centent_box">z</div>
              <div class="left_centent_box">z</div>
            </div>
            <div class="dbxk_bottom">
            <div class="dbxk_bottom_cont">
              <p>Skin color</p>
              <span class="dbxk_box">
                <div class="dbxk_fff"></div>
                <div class="dbxk_D1AC8F"></div>
                <div class="dbxk_855845"></div>
              </span>
            </div>
            <div class="dbxk_bottom_cont">
              <p>Gender</p>
              <span class="dbxk_box">
                <div class="dbxk_fff">男</div>
                <div class="dbxk_fff">女</div>
              </span>
            </div>
            <div class="dbxk_bottom_cont">
              <span class="dbxk_box">
                <div class="dbxk_box_top">
                  <div class="dbxk-">-</div>
                  <div>SIZE</div>
                  <div>+</div>
                </div>
              </span>
              <span class="dbxk_box">
                <div class="dbxk_box_top">
                  <div>-</div>
                  <div>ROTATE</div>
                  <div>+</div>
                </div>
              </span>
            </div>
          </div>
          </div>
              <!-- 四边形 -->
    <div class="sbx">
      <p>Insert your message here</p>
      <div class="sbx_r_b">
        <span class="sbx_r_b_box">S</span>
        <span class="sbx_r_b_box">M</span>
        <span class="sbx_r_b_box">L</span>
      </div>
    </div>
        </div>
        <!-- 右边区域 -->
        <div class="col-md-6">
          <img
            class="mian_r_img"
            src="./img/4_friends_ui_placeholders.png"
            alt=""
          />
        </div>
      </div>
    </main>
    <!-- 功能区==手机 -->
    <main id="h5"></main>
  </body>
</html>
